<template>
	<view class="plan-container">
		<custom-nav-bar title="景点" />
		
		<!-- 瀑布流组件 -->
		<waterfall-flow
			:items="sightList"
			:loading="loading"
			:has-more="hasMore"
			:enable-refresh="true"
			:enable-load-more="true"
			empty-text="暂无景点信息"
			@refresh="handleRefresh"
			@loadmore="handleLoadMore"
			@itemclick="navigateToSightInfo"
		/>
		
		<!-- 悬浮聊天按钮 -->
		<chat-bt :show-pulse="true"></chat-bt>
	</view>
</template>

<script setup>
import{ ref} from 'vue';
import {onLoad } from '@dcloudio/uni-app';
import customNavBar from '@/components/custom-nav-bar/custom-nav-bar.vue';
import waterfallFlow from '@/components/waterfall-flow/waterfall-flow.vue';
import ChatBt from '@/components/chat-ai/chat-bt.vue';
import sightApi from '@/common/api/sight.js';

// 创建响应式变量
const sightList = ref([]);
const loading = ref(false);
const errorMsg = ref('');
const hasMore = ref(true);
const currentPage = ref(1);
const pageSize = ref(10);

// 使用onLoad生命周期钩子获取景点列表数据
onLoad(() => {
	getSightList();
});

// 获取景点列表数据
const getSightList = async (isLoadMore = false) => {
	if (!isLoadMore) {
		loading.value = true;
		errorMsg.value = '';
		sightList.value = [];
		currentPage.value = 1;
	} else {
		loading.value = true;
	}

	try {
		// 调用API获取景点列表，传入分页参数
		const res = await sightApi.getSights({ 
			page: currentPage.value, 
			pageSize: pageSize.value 
		});
		console.log('景点列表API返回结果:', res);

		// 验证API返回格式并处理数据
		if (res && res.status === 'success' && res.data && res.data.items) {
			const newItems = res.data.items;
			
			// 根据是否是加载更多来决定是替换还是追加数据
			if (isLoadMore) {
				sightList.value = [...sightList.value, ...newItems];
			} else {
				sightList.value = newItems;
			}
			
			// 判断是否还有更多数据
			hasMore.value = newItems.length === pageSize.value;
			
			// 更新当前页码
			if (hasMore.value) {
				currentPage.value++;
			}
			
			console.log('成功获取景点列表:', sightList.value);
		} else {
			errorMsg.value = '获取景点列表失败';
			hasMore.value = false;
			console.error('API返回结构异常:', res);
		}
	} catch (error) {
		errorMsg.value = '网络请求失败';
		hasMore.value = false;
		console.error('获取景点列表失败:', error);
	} finally {
		loading.value = false;
	}
};

// 处理下拉刷新
const handleRefresh = () => {
	console.log('触发下拉刷新');
	getSightList(false); // 重新加载第一页
};

// 处理上拉加载更多
const handleLoadMore = () => {
	console.log('触发上拉加载更多');
	if (!loading.value && hasMore.value) {
		getSightList(true); // 加载下一页
	}
};

// 导航到景点详情页面
const navigateToSightInfo = (sight) => {
	if (sight && sight.sightId) {
		try {
			uni.navigateTo({
				url: `/pages/plan/sight-info?sightId=${sight.sightId}`,
				success: () => {
					console.log('导航到景点详情成功，sightId:', sight.sightId);
				},
				fail: (err) => {
					console.error('导航失败:', err);
					uni.showToast({
						title: '导航失败',
						icon: 'none'
					});
				}
			});
		} catch (error) {
			console.error('导航过程中发生错误:', error);
		}
	}
};
</script>

<style lang="scss" scoped>
/* 页面级样式 - 大部分样式已在瀑布流组件中实现 */
.page-container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 确保页面内容不被遮挡 */
::v-deep .uni-pull-refresh {
	background-color: #f5f5f5;
}
</style>
